<template>
  <div>
    <el-form :model="form1" label-width="120px" label-position="left">
      <el-form-item label="房源信息服务">
        <el-input
          v-model.number="form1.houseInformationOne"
          type="number"
          min="0"
          max="100"
          @blur="getNextMoney"
          style="width: 30%; margin-right: 10px"
        >
          <template #append>%</template>
        </el-input>
        <el-input
          v-model="form1.houseInformationTwo"
          style="width: 30%; margin-right: 10px"
          readonly
        >
          <template #append>元</template>
        </el-input>
        <el-input
          placeholder="备注"
          v-model="form1.houseInformationThree"
          style="width: 30%"
        />
      </el-form-item>

      <el-form-item label="权证员">
        <div class="checkbox-row">
          <el-checkbox-group v-model="form1.warrantUserArr">
            <el-checkbox
              v-for="item in warrantUsers"
              :key="item.id"
              :value="item.id"
              @change="changeWarrantUsers"
            >
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </el-form-item>
      <el-form-item label="信贷员">
        <div class="checkbox-row">
          <el-checkbox-group v-model="form1.loanUserArr">
            <el-checkbox
              v-for="item in loanUsers"
              :key="item.id"
              :value="item.id"
              @change="changeLoanUsers"
            >
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </el-form-item>
    </el-form>
    <div class="tips">
      <div>
        分成金额 = (买方服务费+卖方服务费+买方服务费代收+卖方服务费代收) *
        分成比例
      </div>
    </div>
    <div class="actions" style="text-align: right">
      <el-button :loading="subLoad" type="primary" @click="submit"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { reactive, defineProps, onMounted } from "vue";
import { getStationUserList } from "@/api/business/tcForm";
import { editTcForm } from "@/api/business/tcForm";
const { proxy } = getCurrentInstance();
const props = defineProps({
  msgData: {
    type: Object,
    required: true,
  },
  fData: {
    type: Object,
    required: true,
  },
});

const warrantUsers = ref([]);
const loanUsers = ref([]);
async function getUsersList(stationName) {
  const { data } = await getStationUserList({ stationName });
  return data;
}

function changeWarrantUsers(value) {
  const wrrantUserNamesArr = warrantUsers.value
    .filter((v) => {
      return form1.warrantUserArr.includes(v.id);
    })
    .map((v) => v.name);

  form1.wrrantUserNames = wrrantUserNamesArr.join(",");
}
function changeLoanUsers() {
  const loadUserNamesArr = loanUsers.value
    .filter((v) => {
      return form1.loanUserArr.includes(v.id);
    })
    .map((v) => v.name);
  form1.loanUserNames = loadUserNamesArr.join(",");
}

onMounted(async () => {
  warrantUsers.value = await getUsersList("quanzheng");
  loanUsers.value = await getUsersList("xindai");
});
const initData = reactive({ ...props.fData });
//计算房源信息服务金额
function getNextMoney() {
  const fcMoney =
    initData.serviceFeeSellerAr +
    initData.serviceFeeBuyerAr +
    initData.serviceFeeProxySellerAr +
    initData.serviceFeeProxyBuyerAr;
  console.log(fcMoney);
  form1.houseInformationTwo = (
    fcMoney *
    (form1.houseInformationOne / 100)
  ).toFixed(2);
}

// 表单数据对象
const form1 = reactive({
  houseInformationOne: "",
  houseInformationTwo: "",
  houseInformationThree: "",
  warrantUserArr: [],
  loanUserArr: [],
});

props.msgData.warrantUserArr =
  props.msgData.warrantUserArr == null ? [] : props.msgData.warrantUserArr;
props.msgData.loanUserArr =
  props.msgData.loanUserArr == null ? [] : props.msgData.loanUserArr;
nextTick(() => {
  Object.assign(form1, props.msgData);
});
// 如果需要对外暴露数据
defineExpose({ form1 });
const subLoad = ref(false);
const submit = () => {
  const payload = {
    id: initData.id,
    sysHzHouseInformationList: form1,
  };

  subLoad.value = true;
  // TODO: 调用接口提交
  editTcForm(payload)
    .then((res) => {
      subLoad.value = false;
      proxy.$modal.msgSuccess("修改成功");
    })
    .catch((err) => {
      subLoad.value = false;
    });
};
</script>
<style scope lang="scss">
.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.tips {
  font-size: 12px;
  color: #999;
  div {
    margin-top: 4px;
  }
}
</style>
